import { Tabs } from 'antd-mobile';
export default function Test() {
  return (
    <>
      <Tabs onChange={(key) => console.log(key)}>
        <Tabs.Tab title="水果" key="fruits">
          菠萝
        </Tabs.Tab>
        <Tabs.Tab title="蔬菜" key="vegetables">
          西红柿
        </Tabs.Tab>
        <Tabs.Tab title="动物" key="animals">
          蚂蚁
        </Tabs.Tab>
      </Tabs>
    </>
  );
}

// import { baseURL } from '@/utils/request';
// import { getToken } from '@/utils/storage';
// import { useEffect } from 'react';
// import io from 'socket.io-client';

// // 测试使用 `socket.io` 客户端与服务器建立 `WebSocket` 长连接
// export default function Test() {
//   useEffect(() => {
//     // 配置连接
//     const client = io(baseURL, {
//       query: {
//         token: getToken().token,
//       },
//       transports: ['websocket'],
//     });

//     // 建立连接
//     client.on('connect', () => {
//       console.log('连接成功');
//     });

//     // 接收消息
//     client.on('message', (msg) => {
//       console.log(msg);
//     });

//     // 发送消息
//     client.emit('message', { msg: '你妈', timestamp: Date.now() });

//     // 关闭连接
//     return () => {
//       client.close();
//     };
//   }, []);
//   return <>测试页</>;
// }

// -------------------------------------------------------------------------------

// // import Textarea from '@/components/TextArea';
// import { Button, DatePicker, Space, Toast, Input } from 'antd-mobile';
// // import { Popup } from 'antd-mobile';
// import React, { useEffect, useRef, useState } from 'react';
// import styles from './index.module.scss';
// import Dayjs from 'dayjs';

// import { InputRef } from 'antd-mobile/es/components/input';

// export default function Test() {
//   // const [visible, setVisible] = useState(true);

//   // const handleFlieChannge = (e: React.ChangeEvent<HTMLInputElement>) => {
//   //   if (e.target.files) {
//   //     console.log(e.target.files[0]);
//   //   }
//   // };

//   // 测试封装的Textarea组件
//   // const [value, setValue] = useState('123');

//   // 使用日期选择组件
//   const [visible, setVisible] = useState(false);
//   const now = new Date();

//   // - antd input组件-----------------------------------
//   // 通过ref实现聚焦
//   let ref = useRef<InputRef>(null);
//   useEffect(() => {
//     ref.current?.focus();
//   }, []);

//   return (
//     <div className={styles.root}>
//       {/* antd input组件 */}
//       <Input
//         ref={ref}
//         placeholder="请输入内容"
//         style={{ backgroundColor: '#ccc', '--placeholder-color': 'red' }}
//       ></Input>

//       {/* 使用日期选择组件 */}
//       <Space align="center">
//         <Button
//           onClick={() => {
//             setVisible(true);
//           }}
//         >
//           选择
//         </Button>
//         <DatePicker
//           title="时间选择"
//           visible={visible}
//           onClose={() => {
//             setVisible(false);
//           }}
//           // defaultValue={now}
//           value={now}
//           max={now}
//           min={new Date('1990-01-01')}
//           onConfirm={(val) => {
//             //使用dayjs格式化日期
//             Toast.show(Dayjs(val).format('YYYY-MM-DD'));
//             // Toast.show(val.toDateString());
//           }}
//         />
//       </Space>

//       {/* 测试 Textarea组件*/}
//       {/* <Textarea
//         value={value}
//         placeholder="请输入内容"
//         onChange={(e) => setValue(e.target.value)}
//       ></Textarea> */}

//       {/* 测试antd弹出层 */}
//       {/* <Popup
//         // 使用组件的bodyClassName
//         bodyClassName="test-popup"
//         visible={visible}
//         onMaskClick={() => setVisible(false)}
//       >
//         <h1>弹出层</h1>
//       </Popup> */}

//       {/* <input type="file" onChange={(e) => handleFlieChannge(e)} /> */}
//     </div>
//   );
// }
